<section>
    <h1 class="blue" data-id="#plugins/input"><i class="ace-icon fa fa-pencil-square-o grey"></i> Form Inputs &amp;
        Controls</h1>

    <div class="hr hr-double hr32"></div>


    <!-- #section:plugins/input -->
    <div class="help-content">

        <h3 class="info-title smaller" data-id="#plugins/input.chosen">Chosen</h3>
        <!-- #section:plugins/input.chosen -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Chosen is a replacement for browser dropdown lists.
                    <br/>
                    You can find more info about its options here:
                    <a href="http://harvesthq.github.io/chosen/">http://harvesthq.github.io/chosen/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/chosen.css</code>
                    <br/>
                    <code>assets/js/chosen.jquery.js</code>
                </li>

                <li>
                    A basic example could be like this:

<pre data-language="html">
 <select name="myselect" class="chosen-select">
     <option value="1">Option#1</option>
     <option value="2">Option#2</option>
     <option value="2">Option#3</option>
 </select>
</pre>
<pre data-language="javascript">
 $('.chosen-select').chosen(); 
</pre>
                </li>

                <li>
                    Add <code>.tag-input-style</code> class to <code>select</code> element
                    for an alternative multiple chosen style:
<pre data-language="html">
 <select multiple name="myselect" class="chosen-select tag-input-style">
     ...
 </select>
</pre>
                </li>

                <li>
                    Please note that if chosen element is inside a container which is hidden at first,
                    it may not render properly.
                    <br/>
                    To resolve it you should create the chosen or reset its width when the container is shown:
<pre data-language="javascript">
 //an example of a chosen inside a modal
 $('#modal-form').on('shown.bs.modal', function () {
   $('.chosen-select').chosen(); 
 })
 
 //or
 $('#modal-form').on('shown.bs.modal', function () {
    $(this).find('.chosen-container').each(function(){
       $(this).find('a:first-child').css('width' , '210px');
       $(this).find('.chosen-drop').css('width' , '210px');
       $(this).find('.chosen-search input').css('width' , '200px');
    });
 })
</pre>
                </li>

                <li>
                    Chosen plugin is not responsive by default and to make it so, you should change its
                    dimensions on window resize event:
<pre data-language="javascript">
$(window).on('resize.chosen', function() {
    //get its parent width
    var w = $('.chosen-select').parent().width();
    $('.chosen-select').siblings('.chosen-container').css({'width':w});
}).triggerHandler('resize.chosen');
</pre>
                </li>

                <li>
                    Chosen does not support touch devices.
                    <br/>
                    So you can ignore touch devices when initiating chosen on an element:
<pre data-language="javascript">
if(!ace.vars['touch']) {
  //only enable chosen if not a touch device!
  $('.chosen-select').chosen();
}
</pre>

                </li>

            </ul>
        </div>
        <!-- /section:plugins/input.chosen -->


        <h3 class="info-title smaller" data-id="#plugins/input.select2">Select2</h3>
        <!-- #section:plugins/input.select2 -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Select2 is similar to chosen with more advanced features such as remote data loading.
                    <br/>
                    For more info please see <a href="https://github.com/ivaynberg/select2/">https://github.com/ivaynberg/select2/</a>
                </li>

                <li>
                    To use it you should include:
                    <br/>
                    <code>assets/css/select2.css</code>
                    <br/>
                    <code>assets/js/select2.js</code>
                </li>

                <li>
                    You can add <code>.tag-input-style</code> class to <code>select</code> element
                    for an alternative multiple chosen style:
<pre data-language="html">
 <select multiple name="myselect" class="select2 tag-input-style">
     ...
 </select>
</pre>
                </li>
                <!--
                <li>
                    Please also note that Select2's dropdown sometimes jumps off.
                    <br />
                    I have tried to remove all Ace specific styles and scripts and
                    it still happens sometimes.
                </li>
                -->
            </ul>
        </div>
        <!-- /section:plugins/input.select2 -->


        <h3 class="info-title smaller" data-id="#plugins/input.tag-input">Tag Input</h3>
        <!-- #section:plugins/input.tag-input -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    For more info about tag input plugin, please see its page at:
                    <a href="https://github.com/fdeschenes/bootstrap-tag">https://github.com/fdeschenes/bootstrap-tag</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/js/bootstrap-tag.js</code>
                </li>

                <li>
                    Its autocomplete feature is powered by <a href="#plugins/bootstrap.typeahead" class="help-more">Bootstrap's
                    typeahead plugin</a>.
                </li>

                <li>
                    A basic example which retrieve's autocomplete data dynamically from server is like this:
<pre data-language="html">
<input type="text" name="tags" id="form-field-tags" value="mytag1,mytag2"/>
</pre>

<pre data-language="javascript">
var tag_input = $('#form-field-tags');
try{
   tag_input.tag({
      placeholder: tag_input.attr('placeholder'),
      //source: ['tag 1', 'tag 2'],//static autocomplet array

      //or fetch data from database, fetch those that match "query"
      source: function(query, process) {
         $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
          .done(function(result_items){
             process(result_items);
         });
      }
   });
}
catch(e) {
   //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
   tag_input.after('&lt;textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'&lt;/textarea>').remove();
}
</pre>
                </li>

                <li>
                    You can also add new tags using the following code:
<pre data-language="javascript">
//programmatically add a new tag
var $tag_obj = $('#form-field-tags').data('tag');
$tag_obj.add('new tag');
</pre>
                </li>

            </ul>
        </div>
        <!-- /section:plugins/input.tag-input -->


        <h3 class="info-title smaller" data-id="#plugins/input.duallist">Dual Listbox</h3>
        <!-- #section:plugins/input.duallist -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    For more info and examples about dual listbox plugin, please see:
                    <a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox">http://www.virtuosoft.eu/code/bootstrap-duallistbox/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/bootstrap-duallistbox.css</code>
                    <br/>
                    and
                    <br/>
                    <code>assets/js/jquery.bootstrap-duallistbox.js</code>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/input.duallist -->


        <h3 class="info-title smaller" data-id="#plugins/input.multiselect">Bootstrap Multiselect</h3>
        <!-- #section:plugins/input.multiselect -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    For more info and examples about multiselect plugin, please see:
                    <a href="http://davidstutz.github.io/bootstrap-multiselect/">http://davidstutz.github.io/bootstrap-multiselect/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/bootstrap-multiselect.css</code>
                    <br/>
                    and
                    <br/>
                    <code>assets/js/bootstrap-multiselect.js</code>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/input.multiselect -->


        <h3 class="info-title smaller" data-id="#plugins/input.masked-input">Masked Input</h3>
        <!-- #section:plugins/input.masked-input -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    For more info and examples about masked input plugin, please see:
                    <a href="http://digitalbush.com/projects/masked-input-plugin/">http://digitalbush.com/projects/masked-input-plugin/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/js/jquery.maskedinput.js</code>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/input.masked-input -->


        <h3 class="info-title smaller" data-id="#plugins/input.limiter">Input Limiter</h3>
        <!-- #section:plugins/input.limiter -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Input Limiter plugin, limit's textarea input size by displaying a message to user which shows
                    remaining characters.
                </li>

                <li>
                    For more info please see:
                    <a href="http://rustyjeans.com/jquery-plugins/input-limiter">http://rustyjeans.com/jquery-plugins/input-limiter</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/js/jquery.inputlimiter.1.3.1.js</code>
                </li>

                <li>
                    A basic example would be like this:
<pre data-language="javascript">
$('textarea.limited').inputlimiter({
   remText: '%n character%s remaining...',
   limitText: 'max allowed : %n.'
});
</pre>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/input.limiter -->


        <h3 class="info-title smaller" data-id="#plugins/input.autosize">Auto Size</h3>
        <!-- #section:plugins/input.autosize -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Textarea autosize, is used for automatically increasing textarea height as user input grows.
                </li>

                <li>
                    For more info please see its page at:
                    <a href="http://www.jacklmoore.com/autosize/">http://www.jacklmoore.com/autosize/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/js/jquery.autosize.js</code>
                </li>

                <li>
                    A basic example would be something like this:
<pre data-language="javascript">
$('textarea.autosize').autosize({append: "\n"});
</pre>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/input.autosize -->


    </div>
    <!-- /section:plugins/input -->
</section>